/**
 * 一、什么是nextTick？
 * 官方给出的定义是：在下一次dom循环更新结束之后调用执行延迟回调，在修改数据之后立即调用此方法，获取更新后的dom。
 * 通俗点说，在vue中更新dom，是执行的异步更新操作，当数据发生改变，vue就会立即开启一个异步更新队列，
 * 视图需要等队列中的所有数据修改完之后，再统一进行更新
 * 
 * 
 * 简单的说，nextTick方式是在vue中常见的一种异步更新DOM的机制。它的原理是利用js
 * 的事件循环机制以及浏览器的渲染流程来实现延迟执行DOM更新操作。
 * 它的出现主要是为了解决Vue的异步更新导致的DOM更新后的操作问题。
 * 在vue中，数据的变化会触发重新渲染DOM，但实际上，vue的数据更新是异步的，也就是说，
 * 当我们修改了vue实例的数据后，并不会立即进行DOM更新，而是在下一个事件循环中才会进行。
 * 这个异步更新机制的设计是为了优化性能。vue会对进行多次数据变化进行合并，然后在下一个
 * 事件循环中进行一次性的dom更新，从而减少不必要的dom操作，提高性能。
 * 由于异步更新的机制，有时候可能在修改数据后需要立即执行一些dom操作，例如获取到
 * 更新后的dom元素、更新后的样式计算、触发一些特定事件等。这时候就需要使用nextTick方法了
 * nextTick方式是vue提供的一个实用工具，它能够将回调函数延迟到下一个dom更新循环之后执行。
 * 也就是说，通过nextTick方法，我们可以确保在dom更新完成后执行某些操作
 * 使用nextTick方法经常用来解决以下问题：
 * 1、获取更新后的dom元素
 * 2、更新后的样式计算
 * 3、触发一些特定事件
 * 综上所述，nextTick的出现解决了vue的异步更新机制导致的dom更新后的操作问题，使我们能够
 * 在正确的时机执行对应的操作，提高开发效率和灵活性
 * 
 * 二、实现原理
 * 具体而言，当我们在代码中使用nextTick方法时，框架会将待更新的dom操作推入一个队列中，
 * 然后在当前js任务执行完成之后，利用宏任务或微任务（具体取决于框架和浏览器实现）
 * 的机制进行执行，以确保代码逻辑执行完成后再去操作dom
 * 这样的设计能够确保在当前js运行环境中的任何同步操作完成之后才进行dom的更新，以避免
 * 因为dom更新带来的重排或重绘可能导致的性能问题。同时，通过使用异步更新机制，还能够
 * 更好的管理大量dom更新的情况，优化渲染性能
 * 需要注意的是，虽然nextTick方法通常被封装在框架中使用，但在一些现代浏览器中也可以直接
 * 使用原生的Promise或MutationObserver等来实现类似的异步更新效果。具体实现方式可能会
 * 根据不同的框架和浏览器而有所不同。
 * nextTick方法会在下一次dom更新循环结束后执行一个回调函数。这样我们就能确保在操作dom
 * 元素之前，dom已经更新完成。它通过一些异步的技术来实现，确保回调函数被添加到队列中，并
 * 在下一个tick执行
 * 
 * 三、使用场景
 * 
 * 四、如何实现一个简易版的nextTick
 * 
 * 
 */

 Vue.prototype.$myNextTick = () => {
     return new Promise((resolve) => {
         if(typeof MutationObserver !== 'undefined'){
             let observer = new MutationObserver(resolve)
            //  let textNode = 

         }
     })
 }